<template>
  <div class="y-history">
    <h3 class="h3">审批中心</h3>
    <div style="height: 35px">
      <a-button
        v-if="isdetail"
        type="reset"
        style="float: right"
        @click="newClaim"
        >返回列表
      </a-button>
    </div>
    <div v-if="isshow">
      <!-- <div style="position: relative">
        <ul class="tags" style="position: absolute; left: 0; display: flex">
          <li
            v-for="(i, index) in tags"
            @click="changeTag(index)"
            :key="index"
            class="changetags"
            :class="{ ischange: ischange == index }"
          >
            {{ i.name }}
          </li>
        </ul>
        <a-form-model
          :model="form"
          :colon="false"
          :labelCol="{ span: 6 }"
          :wrapper-col="{ span: 17 }"
          style="margin: 10px 0; position: relative; right: -1170px"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="关键字" class="from-item__class">
                <a-input placeholder />
                <span
                  style="
                    cursor: pointer;
                    position: absolute;
                    height: 100%;
                    font-size: 20px;
                    right: 5px;
                    text-align: center;
                  "
                >
                  <a-icon type="search" style="color: #37ddc0" />
                </span>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div> -->

      <div class="tableclass">
        <a-table
          :data-source="data"
          :pagination="false"
          :columns="columns"
          :rowKey="(record) => record.id"
        >
          <span slot="action" slot-scope="text, record">
            <a class="solvebtn" @click="getDetail(record)">详细信息</a>
          </span>
        </a-table>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination
              :show-total="(total) => `共 ${total} 条记录`"
              v-model="form.currentPage"
              :total="total"
              :defaultPageSize="form.pageSize"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-if="isdetail">
      <h3 style="color: #37ddc0; width: 100%; text-align: center">
        物资申请表
      </h3>
      <a-form-model
        :model="form"
        :labelCol="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        style="margin: 10px 0"
      >
        <a-row type="flex" justify="space-between">
          <a-col :span="8">
            <a-form-model-item label="审核单号" class="from-item__class">
              {{ details.auditNumber }}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="批次号" class="from-item__class">
              {{ details.serialNumber }}
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <h3
        style="color: #37ddc0; width: 100%; text-align: center; margin: 15px 0"
      >
        申请物资采购清单
      </h3>
      <div style="position: relative">
        <a-table
          bordered
          :data-source="detaildata"
          :pagination="false"
          :columns="columnsA"
          :scroll="{ y: 250 }"
          :rowKey="(record) => record.id"
        >
        </a-table>
      </div>
      <div style="margin-top: 200px">
        <h3
          style="
            color: #37ddc0;
            width: 100%;
            text-align: center;
            margin: 15px 0;
          "
        >
          审批意见
        </h3>
        <a-table
          bordered
          :data-source="opinion"
          :pagination="false"
          :columns="columnsB"
          :rowKey="(record) => record.id"
        >
          //
          <template
            v-if="departoption"
            slot-scope="text, record"
            slot="departoption"
          >
            <div class="table_td" v-if="departoption.isAudit">
              <p class="td_item">
                <a-tag color="#207064"> {{ departoption.nickname }} </a-tag>
                {{ departoption.auditTime }}
              </p>

              <p class="td_item">意见:{{ departoption.opinion }}</p>
              <a-tag
                class="smallBtn"
                color="#207064"
                v-if="departoption.isAgree"
              >
                已同意
              </a-tag>
              <a-tag class="smallBtn" color="#da6a57" v-else> 已驳回</a-tag>
            </div>
            <div class="table_td" v-else>
              <p class="td_item">
                <a-tag color="#207064"> 签字人 </a-tag>
              </p>

              <p class="td_item">意见: 待填写</p>
            </div>
          </template>
          //
          <template
            v-if="supervisoropinion"
            slot-scope="text, record"
            slot="supervisoropinion"
          >
            <div class="table_td" v-if="supervisoropinion.isAudit">
              <p class="td_item">
                <a-tag color="#207064">
                  {{ supervisoropinion.nickname }}
                </a-tag>
                {{ supervisoropinion.auditTime }}
              </p>

              <p class="td_item">意见: {{ supervisoropinion.opinion }}</p>
              <a-tag
                class="smallBtn"
                color="#207064"
                v-if="supervisoropinion.isAgree"
              >
                已同意
              </a-tag>
              <a-tag class="smallBtn" color="#da6a57" v-else> 已驳回</a-tag>
            </div>

            <div class="table_td" v-else>
              <p class="td_item">
                <a-tag color="#207064"> 签字人 </a-tag>
              </p>

              <p class="td_item">意见: 待填写</p>
            </div>
          </template>

          //
          <template
            v-if="purchaseadvice"
            slot-scope="text, record"
            slot="purchaseadvice"
          >
            <div class="table_td" v-if="purchaseadvice.isAudit">
              <p class="td_item">
                <a-tag color="#207064"> {{ purchaseadvice.nickname }} </a-tag>
                {{ purchaseadvice.auditTime }}
              </p>

              <p class="td_item">意见:{{ purchaseadvice.opinion }}</p>
              <a-tag
                class="smallBtn"
                color="#207064"
                v-if="purchaseadvice.isAgree"
              >
                已同意
              </a-tag>
              <a-tag class="smallBtn" color="#da6a57" v-else> 已驳回</a-tag>
              <!-- <p>{{ purchaseadvice.isAgree }}</p> -->
            </div>
            <div class="table_td" v-else>
              <p class="td_item">
                <a-tag color="#207064"> 签字人 </a-tag>
              </p>

              <p class="td_item">意见: 待填写</p>
            </div>
          </template>
          //
          <template
            v-if="manageropinion"
            slot-scope="text, record"
            slot="manageropinion"
          >
            <div class="table_td" v-if="manageropinion.isAudit">
              <p class="td_item">
                <a-tag color="#207064"> {{ manageropinion.nickname }} </a-tag>
                {{ manageropinion.auditTime }}
              </p>

              <p class="td_item">意见:{{ manageropinion.opinion }}</p>
              <a-tag
                class="smallBtn"
                color="#207064"
                v-if="manageropinion.isAgree"
              >
                已同意
              </a-tag>
              <a-tag class="smallBtn" color="#da6a57" v-else> 已驳回</a-tag>
              <!-- <p>{{ manageropinion.isAgree }}</p> -->
            </div>
            <div class="table_td" v-else>
              <p class="td_item">
                <a-tag color="#207064"> 签字人 </a-tag>
              </p>

              <p class="td_item">意见: 待填写</p>
            </div>
          </template>
        </a-table>
      </div>

      <div v-if="isAction" class="bottom_btn">
        <a-button class="btn" type="primary" @click="onSubmit(1)"
          >同意</a-button
        >
        <a-button class="btn" type="danger" @click="onSubmit(2)">驳回</a-button>
      </div>
    </div>
    <a-modal
      title="审批意见"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null"
    >
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="签字人">
          <a-input v-model="modalForm.signature" />
        </a-form-model-item>
        <a-form-model-item label="意见">
          <a-textarea v-model="modalForm.opinion" :rows="4" />
        </a-form-model-item>
      </a-form-model>
      <a-button type="primary" @click="overUp">确认</a-button>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";
export default {
  name: "y-history",
  data() {
    return {
      gradeList: [], //权限列表
      gradeListA: [],
      length: 0,
      visible: false, //弹窗
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      ischange: 0,
      tags: [
        {
          key: 0,
          name: "全部",
        },
        {
          key: 1,
          name: "待我审批",
        },
        {
          key: 2,
          name: "我已审批",
        },
      ],
      isPeople: false,
      isshow: true,
      isdetail: false,
      data: [],
      isAction: false,
      columns: [
        {
          title: "序号",
          width: "10%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.form.currentPage - 1) * this.form.pageSize + index + 1}`,
        },
        {
          title: "批次号",
          width: "10%",
          ellipsis: "true",
          dataIndex: "serialNumber",
          align: "center",
        },
        {
          title: "审核单号",
          width: "10%",
          ellipsis: "true",
          dataIndex: "auditNumber",
          align: "center",
        },
        {
          title: "审核进度",
          width: "10%",
          dataIndex: "auditPlan",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      total: 0,
      form: {
        currentPage: 1,
        pageSize: 10,
        userId: this.$user.id,
      },
      modalForm: {
        auditNumber: " ", //审核序号
        isAgree: true, //是否同意
        auditPlan: "int ", //审核进度(1大区意见、2主管副总意见、3采购部门意见、4总经理意见、5审核完毕)
        opinion: "", //意见
        signature: this.$user.nickname, //签字
        auditTime: new Date().getTime(), //审核时间
        userId: this.$user.id, //审核人
      },
      detaildata: [],
      procuAuditInfoList: [],
      dataSource: [],
      details: {},
      serialNumber: {
        serialNumber: "",
      },
      auditNumber: "",
      opinion: [
        {
          departoption: "",
          supervisoropinion: "",
          purchaseadvice: "",
          manageropinion: "",
        },
      ],
      departoption: null, //部门意见
      supervisoropinion: null,
      purchaseadvice: null,
      manageropinion: null,
      columnsA: [
        {
          title: "序号",
          dataIndex: "id",
          width: "5%",
          customRender: (text, record, index) =>
            `${(this.form.currentPage - 1) * this.form.pageSize + index + 1}`,
        },
        {
          title: "物资名称",
          dataIndex: "name",
          align: "center",
          width: "15%",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "规格型号",
          dataIndex: "version",
          align: "center",
          width: "15%",
          scopedSlots: { customRender: "version" },
        },

        {
          title: "数量",
          dataIndex: "sum",
          align: "center",
          scopedSlots: { customRender: "sum" },
          width: "4.3%",
        },

        {
          title: "大区",
          dataIndex: "areaName",
          align: "center",
          scopedSlots: { customRender: "areaName" },
        },
      ],
      columnsB: [
        {
          title: "部门意见",
          dataIndex: "departoption",
          align: "center",
          width: "25%",
          scopedSlots: { customRender: "departoption" },
        },
        {
          title: "主管副总意见",
          dataIndex: "supervisoropinion",
          align: "center",
          width: "25%",
          scopedSlots: { customRender: "supervisoropinion" },
        },

        {
          title: "采购部门副总意见",
          dataIndex: "purchaseadvice",
          align: "center",
          scopedSlots: { customRender: "purchaseadvice" },
          width: "25%",
        },

        {
          title: "总经理意见",
          dataIndex: "manageropinion",
          align: "center",
          scopedSlots: { customRender: "manageropinion" },
        },
      ],
    };
  },
  components: {},
  methods: {
    //弹窗操作
    handleCancel() {
      this.visible = false;
    },
    onSubmit(i) {
      // console.log(this.modalForm.auditPlan);

      if (this.isAction) {
        this.visible = true;
        if (i == 2) {
          this.modalForm.isAgree = false;
        }
      }
    },

    //获取数据
    getList() {
      this.$api.findAudit(this.form).then((res) => {
        this.data = res.data.data.records;
        this.total = res.data.data.total;
        this.data.forEach((item) => {
          if (item.auditPlan == 1) {
            item.auditPlan = "部门意见";
          }
          if (item.auditPlan == 2) {
            item.auditPlan = "主管意见";
          }
          if (item.auditPlan == 3) {
            item.auditPlan = "采购意见";
          }
          if (item.auditPlan == 4) {
            item.auditPlan = "经理意见";
          }
          if (item.auditPlan == 5) {
            item.auditPlan = "审批完成";
          }
        });
      });
    },
    newClaim() {
      (this.isshow = !this.isshow), (this.isdetail = !this.isdetail);
      this.gradeListA = [];
      this.departoption = null; //部门意见
      this.supervisoropinion = null;
      this.purchaseadvice = null;
      this.manageropinion = null;
      this.isAction = false;
    },
    //详细信息
    getDetail(item) {
      this.newClaim();
      this.auditNumber = item.auditNumber;
      this.modalForm.auditNumber = item.auditNumber;
      this.serialNumber.serialNumber = item.serialNumber;
      this.axiosDetail(this.serialNumber);
    },
    axiosDetail(item) {
      this.$api.fingDetail(item).then((res) => {
        // console.log(res.data.data);
        this.details = res.data.data;
        this.detaildata = res.data.data.procuAuditDetailListPoList;
        let a = res.data.data.procuAuditInfoList; // 意见列表
        this.procuAuditInfoList = res.data.data.procuAuditInfoList;
        a.forEach((item) => {
          item.auditTime = moment(item.auditTime).format("YYYY/MM/DD");
        });
        this.length = res.data.data.procuAuditInfoList.length;
        if (a[0]) {
          this.departoption = a[0];
          // console.log(this.departoption);
        }
        if (a[1]) {
          this.supervisoropinion = a[1];
        }
        if (a[2]) {
          this.purchaseadvice = a[2];
        }
        if (a[3]) {
          this.manageropinion = a[3];
        }
        this.actionInfoList();
      });
    },
    actionInfoList() {
      this.gradeList.forEach((item, index) => {
        // console.log(index);
        //去除第一一个数据项
        if (index != 0) {
          //判断是否可以签字
          if (item.indexOf(this.$user.id) > -1) {
            let gradeDetail = this.procuAuditInfoList[index - 1];
            if (gradeDetail.isAudit == false) {
              this.modalForm.auditPlan = gradeDetail.auditPlan;
              this.isAction = true;

              return;
            }
            if (gradeDetail.isAgree == false) {
              this.$message.info("该审核已被驳回");
              return;
            }
          }
          //this.procuAuditInfoList
        }
      });
    },
    //判断当前登录人员是几级权限
    getopinion() {
      this.$api.getjurisdiction().then((res) => {
        // console.log(res);
        this.gradeList = res.data.data;
      });
    },
    //同意审批
    overUp() {
      this.gradeListA = [];
      this.modalForm.opinion = "";
      this.visible = false;
      this.$api.checkList(this.modalForm).then((res) => {
        if (res.data.code == 0) {
          this.visible = false;
          this.isAction = false;
          this.axiosDetail(this.serialNumber);
        } else {
          this.$message.info(res.data.errorMessage);
        }
      });
    },
    //tab切换
    changeTag(i) {
      this.ischange = i;
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.form.currentPage = page;
      this.getList();
    },
  },

  mounted() {
    this.getopinion();
    this.getList();
    // var a = [1,2,3,4,5,6];
    // for(let i=0;i<a.length;i++){
    //   console.log(i)
    //   if(i==4){
    //     return
    //   }
    // }
    // a.forEach(v=>{
    //   console.log(v)
    //   if(v==4){
    //     return
    //   }
    // })
  },
};
</script>
<style lang='scss' scoped>
.solvebtn {
  display: inline-block;
  margin: 0 10px;
  color: #9fb043;
}
.smallBtn {
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.bottom_btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  .btn {
    margin: 0 10px;
  }
}
.table_td {
  height: 100px;
  width: 100%;
  .td_item {
    display: flex;
    justify-content: space-between;
  }
}
::v-deep.ant-table-placeholder {
  border: none;
}
.ischange {
  color: #37ddc0 !important;
  border-bottom: 1px solid #37ddc0;
}
.changetags {
  color: #6f8a86;
}
.tags {
  height: 100%;
  li {
    line-height: 40px;
    margin: 0 15px;
    cursor: pointer;
  }
}
.bootom_btn {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 50px;
}
.deleteBtn {
  position: absolute;
  color: #37ddc0;
  right: -20px;
  font-size: 20px;
}
::v-deep .input_style {
  background-color: transparent !important;
  outline: none !important;
  border: none !important;
}

.y-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.y-history .from-item__class {
  display: flex;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}

.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.y-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.y-history .ant-table table {
  border-radius: 0;
  border: 1px solid #207064;
}
::v-deep.y-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
  border: none;
}
::v-deep.y-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #2c6a60;
  padding: 10px;
  position: relative;
}
::v-deep.y-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.y-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.y-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.y-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.y-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
/* 分页 */
::v-deep.y-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>